<template>
  <div class="notice-page">
    <h1>平台公告</h1>
    <div v-for="notice in notices" :key="notice.id" class="notice-item">
      <h2>{{ notice.title }}</h2>
      <p>{{ notice.content }}</p>
      <small>{{ notice.date }}</small>
    </div>
    <div style="height: 100px;"></div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 示例公告数据
const notices = ref([
  {
    id: 1,
    title: '系统维护通知',
    content: '系统将于每周日凌晨1点至3点进行维护，请提前保存好您的工作。',
    date: '2023-10-01'
  },
  {
    id: 2,
    title: '新功能上线',
    content: '我们已上线了新的课程管理功能，现在您可以更方便地管理课程了。',
    date: '2023-09-15'
  },
  {
    id: 3,
    title: '课程报名截止提醒',
    content: '请注意，秋季课程报名截止日期为2023年10月10日，请及时完成报名。',
    date: '2023-09-25'
  },
  {id: 4, title: '教师培训通知', content: '我们将于2023年10月15日举办教师培训，欢迎各位教师参加。', date: '2023-09-30'},
  {id: 5, title: '校园活动预告', content: '10月20日将在图书馆举办校园文化节，欢迎全校师生参加。', date: '2023-10-05'},
]);
</script>

<style scoped>
.notice-page {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.notice-item {
  border-bottom: 1px solid #ccc;
  padding: 10px 0;
}

.notice-item:last-child {
  border-bottom: none;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
}

h2 {
  margin-top: 0;
}

small {
  display: block;
  margin-top: 5px;
  color: #666;
}
</style>
